<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <title>股权宝</title>
    </head>

    <body>

        <div class="page grey">
            <div class="content padd">
                <div class="tips-search-box flex">
                    <img src="images/search_icon.png" alt="" />
                    <input type="text" placeholder="请输入您想要的服务类型" />
                </div>
            </div>
            <div class="secretary-nav-box flex">
                <div class="secretary-nav-item onthis">全部</div>
                <div class="secretary-nav-item">免费</div>
                <div class="secretary-nav-item">付费</div>
            </div>
            <div class="secretary-list-box">
                <div class="secretary-list-item free">
                    <div class="flex">
                        <div class="secretary-list-item-info">
                            <div class="secretary-list-item-name">股权相关协议模板</div>
                            <div class="secretary-list-item-cont">不同合作方式涉及到不同的项目内容</div>
                            <div class="secretary-list-item-label flex"><span>免费</span></div>
                        </div>
                        <button class="use">使用</button>
                    </div>
                </div>
                <div class="secretary-list-item free">
                    <div class="flex">
                        <div class="secretary-list-item-info">
                            <div class="secretary-list-item-name">股权相关协议模板</div>
                            <div class="secretary-list-item-cont">不同合作方式涉及到不同的项目内容</div>
                            <div class="secretary-list-item-label flex"><span>免费</span></div>
                        </div>
                        <button class="use">使用</button>
                    </div>
                </div>
                <div class="secretary-list-item free">
                    <div class="flex">
                        <div class="secretary-list-item-info">
                            <div class="secretary-list-item-name">股权相关协议模板</div>
                            <div class="secretary-list-item-cont">不同合作方式涉及到不同的项目内容</div>
                            <div class="secretary-list-item-label flex"><span>免费</span></div>
                        </div>
                        <button class="use">使用</button>
                    </div>
                </div>
                <div class="secretary-list-item free">
                    <div class="flex">
                        <div class="secretary-list-item-info">
                            <div class="secretary-list-item-name">股权相关协议模板</div>
                            <div class="secretary-list-item-cont">不同合作方式涉及到不同的项目内容</div>
                            <div class="secretary-list-item-label flex"><span>免费</span></div>
                        </div>
                        <button class="use">使用</button>
                    </div>
                </div>
                <div class="secretary-list-item pay">
                    <div class="flex">
                        <div class="secretary-list-item-info">
                            <div class="secretary-list-item-name">股权相关协议模板</div>
                            <div class="secretary-list-item-cont">不同合作方式涉及到不同的项目内容</div>
                            <div class="secretary-list-item-price">￥<span>49.9</span></div>
                        </div>
                        <button class="buy">购买</button>
                    </div>
                </div>
                <div class="secretary-list-item pay">
                    <div class="flex">
                        <div class="secretary-list-item-info">
                            <div class="secretary-list-item-name">股权相关协议模板</div>
                            <div class="secretary-list-item-cont">不同合作方式涉及到不同的项目内容</div>
                            <div class="secretary-list-item-price">￥<span>49.9</span></div>
                        </div>
                        <button class="buy">购买</button>
                    </div>
                </div>
                <div class="secretary-list-item pay">
                    <div class="flex">
                        <div class="secretary-list-item-info">
                            <div class="secretary-list-item-name">股权相关协议模板</div>
                            <div class="secretary-list-item-cont">不同合作方式涉及到不同的项目内容</div>
                            <div class="secretary-list-item-price">￥<span>49.9</span></div>
                        </div>
                        <button class="buy">购买</button>
                    </div>
                </div>
                <div class="secretary-list-item pay">
                    <div class="flex">
                        <div class="secretary-list-item-info">
                            <div class="secretary-list-item-name">股权相关协议模板</div>
                            <div class="secretary-list-item-cont">不同合作方式涉及到不同的项目内容</div>
                            <div class="secretary-list-item-price">￥<span>49.9</span></div>
                        </div>
                        <button class="buy">购买</button>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('.buy').click(function (e) {
               window.location.href = 'fill_in.html';
            });

            $('.secretary-nav-item').click(function (e) {
                $('.secretary-list-item').hide();
                $('.secretary-nav-item').removeClass('onthis');
                $(this).addClass('onthis');
                switch ($(this).index()) {
                    case 0:
                        $('.secretary-list-item').show();
                        break;
                    case 1:
                        $('.free').show();
                        break;
                    case 2:
                        $('.pay').show();
                        break;
                }
            })
        </script>
    </body>
</html>